<template>
    <section class="login">
        <div class="login_modal">
            <img class="img" src="../../assets/images/login-logo.png">
            <p>富士康工业互联网</p>
            <p>Foxconn Industrial Internet</p>
            <Form>
                <FormItem style="width:250px;margin:30px auto;">
                    <Input type="text" :placeholder="$t('langObj.user')" v-model="userData.username" />
                </FormItem>
                <FormItem style="width:250px;margin:30px auto;">
                    <Input type="password" :placeholder="$t('langObj.password')" v-model="userData.password" />
                </FormItem>
                <FormItem style="width:250px;margin:30px auto;">
                    <button class="button" @click.prevent="submitLogin">{{ $t('langObj.login') }}</button>
                </FormItem>
            </Form>
            <div class="reg">
                <div>
                    <span style="color:rgba(102,102,102,1);">{{ $t('langObj.noAccount') }}?</span>
                    <span @click="toRegister">{{ $t('langObj.reg') }}</span>
                </div>
                <p>{{ $t('langObj.forgetPassword') }}</p>
            </div>
        </div>
    </section>
</template>
<script>
import { mapActions } from 'vuex';
import { setToken } from '../../utils/auth';
export default {
    data(){
        return{
            url:this.$route.query.redirect,
            userData:{
                username:'',
                password:'',
            }
        }
    },
    methods:{
        ...mapActions(['Xlogin']),
        toRegister(){
            this.$router.push({path:"/register"})
        },
        submitLogin(){
            this.Xlogin({username:this.userData.username,password:this.userData.password})
            .then(res => {
                setToken('Bearer' + ' ' + res.data.access_token,res.data.exp);
                for(var keys of Object.keys(res.data)){
                    localStorage.setItem(keys,res.data[keys])
                }
                this.$router.replace({path:this.url ? this.url : "/"});
            })
            .catch(err => {
                this.$Message.error(err.response.data.message);
            })
        }
    },
    mounted(){
        // token过期时 重新登入前将localstorage用户信息清除
        localStorage.clear()
    },
}
</script>
<style lang="scss" scoped>
    .login{
        width: 100vw;
        height: 100vh;
        background-image: url(../../assets/images/login-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        .login_modal{
            width:400px;
            height: 400px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            background:linear-gradient(rgba(200, 200, 200, 0.2),rgba(144, 144,144, 0.2));
            border-radius:6px;
            padding:20px;
            color:rgba(255,255,255,1);
            .img{
                display: block;
                margin:10px auto;
                width: 120px;
                height: 40px;
            }
            & > p:first-of-type{
                font-size: 18px;
            }
            & > p{
                text-align: center;  
            }
            .button{
                width: 250px;
                border: 0;
                outline: none;
                font-size: 14px;
                line-height: 32px;
                border-radius:6px;
                background-color: rgba(0,184,238,1);
                cursor: pointer;
            }
        }
        .reg{
            width:250px;
            margin:30px auto;
            display: flex;
            font-size:12px;
            justify-content: space-between;
            & > div > span:last-child{
                cursor: pointer;
            }
            & > p{
                cursor: pointer;
            }
            
        }
    }
</style>